<template>
  <div class="product-item" @click="handleClick">
    <!-- 骨架屏 -->
    <van-skeleton 
      v-if="loading" 
      :row="3" 
      :loading="loading"
      class="product-skeleton"
    >
      <template #template>
        <div class="skeleton-content w-full">
          <van-skeleton-image class="skeleton-image" />
          <div class="skeleton-info">
            <van-skeleton-paragraph :row="2" />
            <div class="skeleton-meta">
              <van-skeleton-paragraph :row="1" />
            </div>
          </div>
        </div>
      </template>
    </van-skeleton>

    <!-- 实际内容 -->
    <template v-else>
      <van-image
        :src="product.image"
        fit="cover"
        class="product-image"
        :loading-icon="'photo'"
        error-icon="warning-o"
      />
      <div class="product-info">
        <h3 class="product-title">{{ product.title }}</h3>
        <p class="product-price">¥{{ product.price }}</p>
        <div v-if="product.sales || product.rating" class="product-meta">
          <span v-if="product.sales" class="sales">已售{{ product.sales }}</span>
          <van-rate
            v-if="product.rating"
            v-model="product.rating"
            :size="12"
            readonly
            allow-half
          />
        </div>
        <div v-if="product.tag" class="product-tag">{{ product.tag }}</div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
interface Product {
  id: number
  title: string
  price: number
  image: string
  sales?: number
  rating?: number
  tag?: string
}

interface Props {
  product: Product
  loading?: boolean
}

interface Emits {
  (e: 'click', productId: number): void
}

const props = withDefaults(defineProps<Props>(), {
  loading: false
})

const emit = defineEmits<Emits>()

const handleClick = () => {
  if (!props.loading) {
    emit('click', props.product.id)
  }
}
</script>

<style scoped>
.product-item {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  cursor: pointer;
}

.product-item:active {
  transform: scale(0.98);
}

.product-image {
  width: 100%;
  height: 150px;
}

.product-info {
  padding: 12px;
  position: relative;
}

.product-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.product-price {
  font-size: 16px;
  font-weight: bold;
  color: #ff4444;
  margin: 0 0 8px 0;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.sales {
  color: #666;
}

.product-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ff4444;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 1;
}

/* 骨架屏样式 */
.product-skeleton {
  height: 100%;
  min-height: 250px;
}

.skeleton-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.skeleton-image {
  width: 100%;
  height: 150px;
  border-radius: 0;
}

.skeleton-info {
  padding: 12px;
  flex: 1;
}

.skeleton-meta {
  margin-top: 8px;
}

/* 骨架屏动画优化 */
:deep(.van-skeleton__content) {
  height: 100%;
}

:deep(.van-skeleton-paragraph__item) {
  height: 14px;
  margin-bottom: 8px;
}

:deep(.van-skeleton-paragraph__item:last-child) {
  margin-bottom: 0;
}
</style>